<template>
  <el-container class="home-container">
    <!--  头部  -->
    <el-header>
<div style="padding-left: 70%">
  <el-button type="info" @click="logout" size="small" style="margin-top: 15px">退出</el-button>
  <el-button type="warning" @click="alterPassword" size="small" style="margin-top: 15px">修改密码</el-button>
</div>
    </el-header>
    <!--    主体-->
    <el-container>
      <!--   侧边栏   -->
      <el-aside :width="collapseState ? '64px' : '200px'">
        <div class="toggle-button" @click="toggleCollapse">|||</div>
        <!--    侧边栏菜单    -->
        <el-menu
          background-color="#545c64"
          :unique-opened="true"
          text-color="#fff"
          active-text-color="#00923f"
          :collapse="collapseState"
          :collapse-transition="false"
          router
        >
          <!--     一级菜单     -->
          <el-submenu :index="item.id.toString()" v-for="(item,index) in menuTree" :key="index">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>{{ item.name }}</span>
            </template>
            <!--      二级菜单      -->
            <el-menu-item :index="subItem.path.toString()" v-for="(subItem,index) in item.children" :key="index">
              <template slot="title">
                <i class="el-icon-s-grid"></i>
                <span>{{ subItem.name }}</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!--   内容   -->
      <el-main>
        <!-- 路由占位符 -->
        <router-view :key="$route.path + $route.query.id"></router-view>
      </el-main>
      <!-- 弹窗修改密码 -->
      <el-dialog title="修改密码" :visible.sync="afterPasswordFormVisible" width="30%">
        <el-form ref="afterPasswordFormRef" :model="afterPasswordForm" label-width="150px"
                 :rules="afterPasswordFormRules">
          <el-form-item prop="password" label="原密码" style="width:80%">
            <el-input v-model="afterPasswordForm.password" placeholder="请输入原密码" show-password></el-input>
          </el-form-item>
          <el-form-item prop="afterPassword" label="修改密码" style="width:80%">
            <el-input v-model="afterPasswordForm.afterPassword" placeholder="请输入密码" show-password></el-input>
          </el-form-item>
          <el-form-item prop="checkPassword" label="确认密码" style="width:80%">
            <el-input v-model="afterPasswordForm.checkPassword" placeholder="请再次输入密码" show-password></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="afterPasswordFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="subAlterPassword">确 定</el-button>
        </div>
      </el-dialog>
    </el-container>
  </el-container>
</template>

<script>
  export default {
    data() {
      return {
        afterPasswordFormVisible: false,
        afterPasswordForm: {
          password: '',
          afterPassword: '',
          checkPassword: ''
        },
        reqAfterPasswordForm: {
          md5pwd: '',
          md5afterPwd: ''
        },
        menuTree: [{
          id: 0,
          name: '',
          path: '',
          children: [{
            id: 0,
            name: '',
            path: ''
          }
          ]
        }],
        apiList: [],
        collapseState: false,
        afterPasswordFormRules: {
          // 验证密码是否合法
          password: [
            {
              required: true,
              message: '请输入用户密码',
              trigger: 'blur'
            },
            {
              min: 6,
              max: 15,
              message: '长度在 6 到 15 个字符',
              trigger: 'blur'
            }
          ],
          afterPassword: [
            {
              required: true,
              message: '请输入用户密码',
              trigger: 'blur'
            },
            {
              min: 6,
              max: 15,
              message: '长度在 6 到 15 个字符',
              trigger: 'blur'
            }
          ],
          checkPassword: [
            {
              required: true,
              message: '请输入用户密码',
              trigger: 'blur'
            },
            {
              min: 6,
              max: 15,
              message: '长度在 6 到 15 个字符',
              trigger: 'blur'
            }
          ]
        }
      }
    },
    created() {
      this.getMenuList()
    },
    methods: {
      // 登出
      logout() {
        window.sessionStorage.clear()
        this.$router.push('/login')
      },
      // 修改密码
      alterPassword() {
        this.afterPasswordFormVisible = true
      },
      // 提交修改密码
      subAlterPassword() {
        this.$refs.afterPasswordFormRef.validate(async valid => {
          if (!valid) return
          const md5pwd = this.$md5(this.afterPasswordForm.password)
          const md5afterPwd = this.$md5(this.afterPasswordForm.afterPassword)
          const md5cpwd = this.$md5(this.afterPasswordForm.checkPassword)
          if (md5afterPwd !== md5cpwd) {
            return this.$message.error('两次密码输入错误，请检查！')
          } else {
            this.reqAfterPasswordForm.md5pwd = md5pwd
            this.reqAfterPasswordForm.md5afterPwd = md5afterPwd
            // 修改密码请求
            const {data: res} = await this.$http.post('/APIServer/api/afterPassword', this.reqAfterPasswordForm)
            if (res.code !== 200) return this.$message.error(res.msg)
            this.$message.success('密码修改成功,请重新登录！')
            this.logout()
          }
        })
      },
      // 获取api菜单
      async getMenuList() {
        const {data: res} = await this.$http.get('/sysPermission/getMenuTree')
        if (res.code !== 200) {
          return this.$message.error(res.msg)
        }
        this.menuTree = res.menuTree
      },
      // 菜单折叠与展开
      toggleCollapse() {
        this.collapseState = !this.collapseState
      },
      goApiItem(path) {
        if (path) {
          console.log('进入路由跳转')
          console.log('点击二级菜单,跳转:' + path)
          this.$router.push({
            path: path
          })
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .home-container {
    height: 100%;
  }

  .el-header {
    background-color: #2b4b6b;
    padding: 0;
  }

  .el-aside {
    background-color: #545c64;

    .el-menu {
      border-right: 0px;
    }
  }

  .el-main {
    background-color: #eeeeee;
  }

  .toggle-button {
    background-color: slategrey;
    font-size: 10px;
    line-height: 24px;
    color: white;
    text-align: center;
    letter-spacing: 0.2em;
    cursor: pointer;
  }
</style>
